<template>
    <el-dialog title="公告详情" :visible.sync="dialogFormVisible" class="detail-dialog">
        <el-form ref="form"
                 :model="formData"
                 label-width="100px"
                 class="box_acct_form">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="小区名称:" >
                        <el-input size="medium"
                                  readonly
                                  v-model="formData.communityname"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发布时间:">
                        <el-date-picker v-model="formData.createtime"
                                        class="input"
                                        size="medium"
                                        readonly
                                        type="date"
                                        style="width: 100%;background-color: #FAFAFA"
                                        format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12" style="width: 100%">
                    <el-form-item label="公告主题:">
                        <el-input size="medium"
                                  readonly
                                  v-model="formData.title"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-form-item label="公告内容:">
                        <el-input type="textarea"
                                  readonly
                                  :rows="5"
                                  v-model="formData.content"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24" style="width: 100%">
                    <el-form-item label="公告阅读:" v-if="this.type == 2">
<!--                        <el-switch-->
<!--                                v-model="formData.status"-->
<!--                                active-text="已阅"-->
<!--                                inactive-text="未阅">-->
<!--                        </el-switch>-->
                        <el-input v-show="false"
                                  size="medium"
                                  v-model="formData.postnum"></el-input>
                        <el-button
                                size="medium"
                                type="primary"
                                plain
                                style="width: 100px"
                                @click="calc(1)"
                                :disabled="this.formData.postnum>=999">阅读量+1</el-button>
                    </el-form-item>
                    <el-form-item label="公告状态:" v-else>
                        <!--                        <el-switch-->
                        <!--                                v-model="formData.status"-->
                        <!--                                active-text="已阅"-->
                        <!--                                inactive-text="未阅">-->
                        <!--                        </el-switch>-->
                        <el-badge :value="formData.postnum" :max="99" class="item">
                            <el-button size="medium" disabled style="text-align: center;width: 80px;color: grey">阅读量</el-button>
                        </el-badge>
<!--                        <el-input size="medium"-->
<!--                                  readonly-->
<!--                                  v-model="formData.post"></el-input>-->
                    </el-form-item>
                </el-col>
            </el-row>
<!--            后续有时间再开发-->
<!--            <el-row :gutter="24">-->
<!--                <el-col :span="24">-->
<!--                    <el-form-item label="公告收藏:">-->
<!--                        <el-button size="medium" style="text-align: center;border: 0;background: #fff"><i class="el-icon-star-on" style="font-size: 16px" @click="mySave" ref="mySave"></i></el-button>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--            </el-row>-->
            <el-row :gutter="24">
                <el-col :span="12" style="width: 100%">
                    <el-button type="primary" size="medium" style="float: right;text-align: center;width: 100px"
                               @click="close">关闭</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
</template>

<script>
    export default {
        name: "posterDialog",
        data(){
            return{
                dialogFormVisible: false,
                formData:{
                    communityname: '',
                    createtime: '',
                    title: '',
                    content: '',
                    status: true,
                    postnum: '1',
                    // post:''
                },
                type: '',
            }
        },
        created(){
            let token = sessionStorage.token;
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
        },
        // watch:{
        //     'formData.post':{
        //         handler(){
        //             this.formData.post = this.formData.postnum
        //             console.log(this.formData.post,'监听')
        //         },
        //         // deep: true,
        //         immediate: true
        //     }
        // },
        computed: {

        },
        methods:{
            // 计算阅读量
            calc(n){
                this.formData.postnum=this.formData.postnum*1+n;
                this.$axiosToken({
                    url: '/poster/updatePostNum',
                    method: 'post',
                    data:{
                        p_id: this.formData.p_id,
                        postnum: this.formData.postnum
                    },
                    success: (result)=>{
                    }
                });
            },
            // 关闭
            close(){
                this.dialogFormVisible = false;
            },
            // mySave(){
            //     this.$refs.mySave.style.color = "#bea028";
            // }
        },

    }
</script>

<style scoped>
    /deep/.el-dialog__title{
        line-height: 24px;
        font-size: 20px;
        color: #303133;
        font-weight: bolder
    }
    .box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-input {
        width: 100%;
    }
    .box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-select {
        width: 100%;
    }
    textarea
    .box_acct_form
    .el-row
    .el-col
    .el-form-item
    .el-form-item__content
    .el-textarea {
        width: 100%;
    }

    .box_acct_form .el-row {
        margin-bottom: 0px;
    }

    .btn_div button {
        height: 32px;
        width: 107px;
    }

    .el-button{
        width: 60px;
        height: 36px;
        font-size: 14px;
    }
</style>